<template>
  <div class="pageStyle mg-10 pd-20">
    <div class="searchTable">
      <ElRow class="search-color" :gutter="20">
        <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <span class="search-text">事件类型：</span>
          <ElSelect
            v-model="ruleForm.eventType"
            style="width: 70%"
            placeholder="请选择事件类型"
            @change="search()"
          >
            <ElOption
              v-for="item in thingData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElCol>
        <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <span class="search-text">来源：</span>
          <ElSelect
            v-model="ruleForm.source"
            style="width: 70%"
            placeholder="请选择来源"
            @change="search()"
          >
            <ElOption
              v-for="item in sourceData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElCol>
        <ElCol :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <span class="search-text">告警时间：</span>
          <ElDatePicker
            v-model="ruleForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="search()"
          />
        </ElCol>
      </ElRow>
      <ElRow style="margin-top: 20px">
        <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <span class="search-text">状态：</span>
          <ElSelect
            v-model="ruleForm.status"
            style="width: 70%"
            placeholder="请选择状态"
            @change="search()"
          >
            <ElOption
              v-for="item in statusData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElCol>
        <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="t-l">
          <ElButton class="b-r-4" type="primary" @click="debouncedSearch"
            >查询</ElButton
          >
          <ElButton @click="resetForm(ruleFormRef)">重置</ElButton>
        </ElCol>
      </ElRow>
    </div>
    <div class="tablePage">
      <div style="padding-top: 20px">
        <ElTable :data="tableData" stripe style="width: 100%" row-key="id">
          <ElTable.TableColumn
            prop="createTime"
            label="创建时间"
            align="center"
          />
          <ElTable.TableColumn
            prop="eventType"
            label="事件类型"
            align="center"
          />
          <ElTable.TableColumn
            prop="eventName"
            label="事件名称"
            align="center"
          />
          <ElTable.TableColumn prop="address" label="告警地址" align="center" />
          <ElTable.TableColumn
            prop="organizationName"
            label="所属组织"
            align="center"
          />
          <ElTable.TableColumn
            prop="reportPersonOrDevice"
            label="上报人/设备"
            align="center"
          />
          <ElTable.TableColumn prop="source" label="告警来源" align="center" />
          <ElTable.TableColumn prop="state" label="状态" align="center" />
          <ElTable.TableColumn fixed="right" label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="detailItem(scope.row)"
                >详情</el-button
              >
            </template>
          </ElTable.TableColumn>
        </ElTable>
      </div>
      <div class="pagination">
        <ElPagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButton,
  ElInput,
  ElTable,
  ElSwitch,
  ElDatePicker,
  ElPagination,
  ElSelect,
  ElOption,
  ElMessageBox,
  ElRow,
  ElCol,
} from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import { router } from '#/router';
import { list } from '#/api/task/alarm';
import dayjs from 'dayjs';
import { dateShortcuts } from "#/utils/dateShortcuts";
import { useDebounceFn } from "@vueuse/core";
const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  eventType: '',
  status: '',
  source: '',
  time: [],
});

const tableData = ref([]);
const thingData = [
  {
    value: '0',
    label: '人群聚集',
  },
  {
    value: '1',
    label: '车辆事故',
  },
  {
    value: '2',
    label: '重点车辆',
  },
  {
    value: '3',
    label: '重点人员',
  },
  {
    value: '4',
    label: '寻衅滋事',
  },
];
const sourceData = [
  {
    value: '0',
    label: 'AI识别',
  },
  {
    value: '1',
    label: '人工上报',
  },
];
const statusData = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '1',
    label: '已处理',
  },
  {
    value: '0',
    label: '未处理',
  },
];
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const search = async () => {
  const params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    startTime: dayjs(ruleForm.time[0]).format('YYYY-MM-DD HH:mm:ss')
      ? dayjs(ruleForm.time[0]).format('YYYY-MM-DD HH:mm:ss')
      : '',
    endTime: dayjs(ruleForm.time[1]).format('YYYY-MM-DD HH:mm:ss')
      ? dayjs(ruleForm.time[1]).format('YYYY-MM-DD HH:mm:ss')
      : '',
    eventType: ruleForm.eventType,
    source: ruleForm.source,
    state: ruleForm.status,
  };
  try {
    const { data } = await list(params);
    if (data.records.length > 0) {
      tableData.value = data.records;
      total.value = data.total;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (err) {
    ElMessage.error('加载数据失败');
  }
};
const debouncedSearch = useDebounceFn(search, 500);

const resetForm = (formEl) => {
  currentPage.value = 1;
  ruleForm.eventType = '';
  ruleForm.source = '';
  ruleForm.status = '';
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  ruleForm.time = [
    dayjs(start).format('YYYY-MM-DD HH:mm:ss'),
    dayjs(end).format('YYYY-MM-DD HH:mm:ss'),
  ];
  search();
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

const detailItem = (row) => {
  router.push({
    name: 'AlarmDetail',
    query: {
      id: row.id,
    },
  });
};

onMounted(() => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  ruleForm.time = [
    dayjs(start).format('YYYY-MM-DD HH:mm:ss'),
    dayjs(end).format('YYYY-MM-DD HH:mm:ss'),
  ];
  search();
});
</script>

<style lang="css" scoped>
.pageStyle {
  background: #fff;
}

.tablePage {
  height: calc(100vh - 200px);
}

.el-table--fit {
  height: calc(100vh - 304px);
}

:deep(.el-table--fit .el-table__inner-wrapper:before) {
  width: 0 !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 20px 20px 0 20px;
}

.pd-20 {
  padding-bottom: 0px;
}
</style>
